<template>
  <div id="Enrich" class="mainpage">
    <!-- 面包导航开始 -->
    <el-row style="margin: 15px">
      <div class="breadcrumb">
        <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="5">
          <div class="grid-content unseealbe-content"></div>
        </el-col>
        <el-col :xs="24" :sm="22" :md="20" :lg="18" :xl="14">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item
              :to="{ path: item.path }"
              v-for="(item, j) in paths"
              :key="j"
              >{{ item.name }}</el-breadcrumb-item
            >
          </el-breadcrumb>
        </el-col>
        <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="5">
          <div class="grid-content unseealbe-content"></div>
        </el-col>
      </div>
    </el-row>
    <!-- 面包导航结束 -->
    <!-- 内容主体 -->
    <el-row :gutter="10">
      <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="5">
        <div class="grid-content unseealbe-content"></div>
      </el-col>
      <el-col
        :xs="24"
        :sm="22"
        :md="20"
        :lg="18"
        :xl="14"
        style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)"
      >
        <!-- 在此嵌入组件 -->
        <el-row :gutter="10">
          <el-col :span="22" :offset="1">
            <!-- 说明文字开始 -->
            <el-row :gutter="10" style="margin: 20px">
              <span
                class="demonstration"
                style="
                  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC',
                    'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial,
                    sans-serif;
                  font-size: 18px;
                  font-color: blue;
                "
                >请输入所需分析的数据</span
              >
            </el-row>
            <!-- 说明文字结束 -->
            <!-- 选择卡片开始 -->
            <el-row>
              <el-tabs type="border-card">
                <!-- 选择卡片的第一部分 -->
                <el-tab-pane label="Over-Representation Analysis">
                  <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="5">
                    <div class="grid-content unseealbe-content"></div>
                  </el-col>
                  <el-col :xs="24" :sm="22" :md="20" :lg="18" :xl="14">
                    <h2>请输入需要分析的数据:</h2>
                    <!-- 选择卡片内容 -->
                    <!-- 输入框 -->
                    <el-input
                      type="textarea"
                      :rows="6"
                      placeholder="例：
C00001
C00002"
                      v-model="textarea"
                      style="margin: 10px"
                    >
                    </el-input>
                    <!-- 输入框结束 -->
                    <!-- 选择器 -->
                    <el-row>
                      <span style="font-size: 16px">Input Type:</span>
                      <el-select
                        v-model="value1"
                        placeholder="请选择"
                        style="margin: 10px"
                      >
                        <el-option
                          v-for="item in options1"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-row>
                    <el-row>
                      <span style="font-size: 16px">Feature Type:</span>
                      <el-select
                        v-model="value2"
                        placeholder="请选择"
                        style="margin: 10px"
                      >
                        <el-option
                          v-for="item in options2"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-row>
                    <el-row>
                      <span style="font-size: 16px">Example:</span>
                      <el-radio-group
                        v-model="radio"
                        style="margin: 10px"
                        @change="exampleSelect"
                      >
                        <el-radio :label="1">none</el-radio>
                        <el-radio :label="2">list1</el-radio>
                        <el-radio :label="3">list2</el-radio>
                      </el-radio-group>
                    </el-row>
                    <el-row>
                      <el-col :xs="11" :sm="11" :md="11" :lg="11" :xl="11">
                        <div class="grid-content unseealbe-content"></div>
                      </el-col>
                      <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
                        <el-button
                          plain
                          style="margin: 10px"
                          @click="createTable"
                          >提交</el-button
                        >
                      </el-col>
                    </el-row>
                    <!-- 选择器结束 -->
                    <!-- 内容结束 -->
                  </el-col>
                </el-tab-pane>
                <!-- 选择卡片第一部分结束 -->
                <!-- 选择卡片第二部分开始 -->
                <el-tab-pane label="Single Sample Profiling">
                  <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="5">
                    <div class="grid-content unseealbe-content"></div>
                  </el-col>
                  <el-col :xs="24" :sm="22" :md="20" :lg="18" :xl="14">
                    <h2>请输入需要分析的数据:</h2>
                    <!-- 选择卡片内容 -->
                    <!-- 输入框 -->
                    <el-input
                      type="textarea"
                      :rows="6"
                      placeholder="例：
L-Isolecine	0.34
Fumaric acid	0.47"
                      v-model="textarea"
                      style="margin: 10px"
                    >
                    </el-input>
                    <!-- 输入框结束 -->
                    <!-- 选择器 -->
                    <el-row>
                      <span style="font-size: 16px">Input Type:</span>
                      <el-select
                        v-model="value1"
                        placeholder="请选择"
                        style="margin: 10px"
                      >
                        <el-option
                          v-for="item in options1"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-row>
                    <el-row>
                      <span style="font-size: 16px">Feature Type:</span>
                      <el-select
                        v-model="value2"
                        placeholder="请选择"
                        style="margin: 10px"
                      >
                        <el-option
                          v-for="item in options2"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-row>
                    <el-row>
                      <span style="font-size: 16px">Biofluid (unit):</span>
                      <el-select
                        v-model="value3"
                        placeholder="请选择"
                        style="margin: 10px"
                      >
                        <el-option
                          v-for="item in options3"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-row>
                    <el-row>
                      <div style="margin-top: 20px">
                        <el-radio-group v-model="radio" size="small">
                          <el-radio label="true" border>使用我们的数据</el-radio>
                        </el-radio-group>
                      </div>
                    </el-row>
                    <el-row>
                      <el-col :xs="11" :sm="11" :md="11" :lg="11" :xl="11">
                        <div class="grid-content unseealbe-content"></div>
                      </el-col>
                      <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
                        <el-button
                          plain
                          style="margin: 10px"
                          @click="createTable"
                          >提交</el-button
                        >
                      </el-col>
                    </el-row>
                    <!-- 选择器结束 -->
                    <!-- 内容结束 -->
                  </el-col>
                </el-tab-pane>
                <!-- 选择卡片第二部分结束 -->
              </el-tabs>
            </el-row>
            <!-- 选择卡片结束 -->
          </el-col>
        </el-row>
        <!-- 嵌入组件结束 -->
      </el-col>
      <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="5">
        <div class="grid-content unseealbe-content"></div>
      </el-col>
    </el-row>
    <!-- 内容主体结束 -->
  </div>
</template>

<script>
import algo from "@/api/algo";
export default {
  data() {
    return {
      radio: 1,
      options1: [
        {
          value: "name",
          label: "Compound name",
        },
        {
          value: "hmdb",
          label: "HMDB ID",
        },
        {
          value: "kegg",
          label: "KEGG ID",
        },
        {
          value: "pubchem",
          label: "PubChem ID",
        },
        {
          value: "chebi",
          label: "ChEBI ID",
        },
        {
          value: "metlin",
          label: "METLIN",
        },
        {
          value: "hmdb_kegg",
          label: "HMDB and KEGG ID",
        },
      ],
      value1: "name",
      options2: [
        {
          value: true,
          label: "Metabolites",
        },
        {
          value: false,
          label: "Lipids",
        },
      ],
      value2: true,
      options3: [
        {
          value: true,
          label: "Urine (umol/mmol_creatinine)",
        },
        {
          value: false,
          label: "Blood (umol)",
        },
        {
          value: true,
          label: "CSF (umol)",
        },
        {
          value: false,
          label: "Saliva (uM)",
        },
        {
          value: true,
          label: "Amniotic fluid (uM)",
        },
        {
          value: false,
          label: "Bile (uM)",
        },
        {
          value: true,
          label: "Breast Milk (uM)",
        },
        {
          value: false,
          label: "Cytoplasm (uM)",
        },
        {
          value: true,
          label: "Feces (uM)",
        },
        {
          value: false,
          label: "Feces (nmol/g)",
        },
      ],
      value3: true,
      textarea: "",
      radio:false,
      paths: [
        { path: "/", name: "首页" },
        { path: "/algo", name: "分析算法" },
        { path: "/algo/enrich-normal/enrich-input", name: "富集分析输入" },
      ],
    };
  },
  created() {
    algo.GetConnection();
  },
  methods: {
    exampleSelect() {
      if (this.radio == 1) {
        this.textarea = "";
      } else if (this.radio == 2) {
        this.textarea =
          "Acetoacetic acid\nBeta-Alanine\nCreatine\nDimethylglycine\nFumaric acid\nGlycine\nHomocysteine\nL-Cysteine\nL-Isolucine\nL-Phenylalanine\nL-Serine\nL-Threonine\nL-Tyrosine\nL-Valine\nPhenylpyruvic acid\nPropionic acid\nPyruvic acid\nSarcosine";
      } else if (this.radio == 3) {
        this.textarea =
          "CerP(d18:1/26:1)\nDG(18:0/15:0)\nDG(18:2/19:0)\nLysoPC(10:0)\nLysoPC(17:0)\nLysoPE(22:2)\nPA(18:1/18:0)\nPA(18:1/21:0)\nPA(20:4/20:0)\nPA(22:2/24:0)\nPA(22:6/18:1)\nPC(20:5/18:2)\nPC(P-18:0/18:1)\nPE(18:1/22:1)\nPE(18:2/16:0)\nPE(18:2/21:0)\nPE(18:2/22:1)\nPE(20:2/18:2)\nPE(20:3/20:2)\nPE(20:3/22:0)\nPE(20:4/18:0)\nPE(20:4/20:0)\nPE(P-16:0/18:0)\nPE(P-18:0/13:0)\nPE(P-18:0/17:0)\nPE(P-18:0/20:4)\nPE(P-18:0/20:5)\nPE(P-18:0/22:1)\nPE(P-20:0/22:6)\nPG(18:0/16:0)\nPG(18:1/18:0)\nPG(22:6/20:1)\nPI(18:2/18:1)\nPI(22:2/16:0)\nPS(18:0/21:0)\nPS(18:1/20:3)\nPS(18:1/22:0)\nPS(18:1/24:1)\nPS(18:2/22:1)\nPS(20:1/18:0)\nPS(20:3/21:0)\nPS(22:6/17:2)\nPS(22:6/18:0)\nSQDG(18:0/12:0)";
        this.value2 = false;
      }
    },
    getText() {
      let cmd = `cmpd.vec<-c(`;
      let code = this.textarea.split(/[\r\n]+/); // 根据换行或者回车进行识别
      code.forEach((item, index) => {
        // 删除空项
        if (!item) {
          code.splice(index, 1);
        }
      });
      code = Array.from(new Set(code)); // 去重
      let l = code.length;
      code.forEach((item, index) => {
        if (index != l - 1) {
          cmd += `"${item}",`;
        } else {
          cmd += `"${item}"`;
        }
      });
      cmd += `);\n`;
      return cmd;
    },
    getCmd() {
      let cpd = this.getText();
      let cmd = `mSet<-InitDataObjects("conc", "msetora", FALSE);\n${cpd}mSet<-Setup.MapData(mSet, cmpd.vec);\nmSet<-CrossReferencing(mSet, "${
        this.value1
      }"${
        this.value2 === false ? ",lipid = T" : ""
      });\nmSet<-CreateMappingResultTable(mSet);`;
      return cmd;
    },
    createTable() {
      let cmd = this.getCmd();
      algo.EnrichCreateTable(cmd).then((response) => {
        this.$router.push({ name: "algo-enrich-list" });
      });
    },
  },
};
</script>

<style>
.el-col {
  border-radius: 4px;
}

.el-row {
  min-height: 30px;
}

.unseealbe-content {
  background: #ffffff;
}

.grid-content {
  border-radius: 4px;
  min-height: 10px;
}

.mainpage {
  margin-bottom: 0px;
  min-height: 800px;
}
</style>